import React, {useEffect, useMemo, useState} from 'react'

// import Table from '@/components/Table';
import CustomTable from '@/components/Table'

import Styles from './index.less'

interface ClueRecommendationRecordType {
	pageType: string
	detailRecord: any[]
	// clueId: any
}

export function ClueRecommendationRecord({
	pageType,
	detailRecord,
}: // clueId,
ClueRecommendationRecordType) {
	// const [dataList, setDataList] = useState<any[]>([]);
	// const [pagination, setPagination] = useState({ current: 1, size: 10 });
	const [formData, setFormData] = useState({})
	// const [total, setTotal] = useState()
	const [params, setParams] = useState({
		current: 1,
		pageSize: 10,
	})
	const [loading, setLoading] = useState(false)

	const getTabelValue = async (value: any, pagination?: any) => {
		setLoading(true)
		let values = value
		setFormData(values)
		const newPagination = pagination || {
			current: 1,
			size: params.pageSize,
		}
		setParams(newPagination)
		values = {
			...values,
			...newPagination,
		}
		// const res = await getRecommendList({...values, clueId})
		// if (res?.data) {
		// 	setTotal(res.data?.total || 0)
		// 	if (res.data?.records) {
		// 		const newData = res.data?.records.map((item: any) => ({
		// 			...item,
		// 			...item.marketingDitch,
		// 		}))
		// 		setTableList(newData || [])
		// 	}
		// }
		setLoading(false)
	}

	useEffect(() => {
		getTabelValue(formData)
	}, [])

	const Colnums: any[] = useMemo(
		() => [
			{
				title: '冲单奖励对应规则编号',
				dataIndex: 'rulesId',
				align: 'center',
			},
			{title: '拉新单数', dataIndex: 'singular', align: 'center'},
			{
				title: '对应阶梯',
				dataIndex: 'correspondingLadder',
				align: 'center',
			},
			{title: '冲单奖励金额', dataIndex: 'amount', align: 'center'},
		],
		[],
	)

	return (
		<>
			{pageType ? (
				<div className={Styles.clueRecommendationRecordType}>
					<div className={Styles.titleBox}>冲单奖励明细</div>
					<div className={Styles.content}>
						<CustomTable
							params={params}
							columns={Colnums}
							total={(detailRecord || []).length}
							// pagination
							// callback={(pagination: any) => {
							// 	console.log(pagination)
							// 	getTabelValue(formData, pagination)
							// }}
							loading={loading}
							dataSource={detailRecord}
						/>

						{/* <Table
          pagination
          params={pagination}
          columns={Colnums}
          callback={(p: any) => {
            setPagination(p);
          }}
          dataSource={dataList}
        /> */}
					</div>
				</div>
			) : (
				<></>
			)}
		</>
	)
}
